<template>
    <a-form ref="formRef" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="手册标题" :rules="rules.title" name="title">
            <a-input v-model:value="form.title" placeholder="请输入数据手册标题" />
        </a-form-item>
        <a-form-item label="封面" :rules="rules.image" name="image">
            <upload-image v-model:value="form.image" />
        </a-form-item>
        <a-form-item label="PDF手册" :rules="rules.pdf" name="pdf">
            <upload-file v-model:value="form.pdf" accept=".pdf" />
        </a-form-item>
        <a-form-item label="排序号" :rules="rules.sort" name="sort">
            <a-input-number v-model:value.number="form.sort" :min="1" placeholder="请输入排序号">
                <template #addonAfter>
                    <a-tooltip placement="bottomRight">
                        <template #title>排序号越小越靠前</template>
                        <question-circle-outlined />
                    </a-tooltip>
                </template>
            </a-input-number>
        </a-form-item>
        <a-form-item label="状态" :rules="rules.status" name="status">
            <Switch v-model:checked="form.status" />
        </a-form-item>
    </a-form>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import { useForm } from '@iframe/tools/mixins/FormMixins'
import { UploadFile, UploadImage, Switch } from '@iframe/tools/components'

const { validate, getForm, setForm } = useForm()
const formRef = ref()
const form = reactive({
    status: 0
})
const rules = reactive({
    title: { required: true, message: '请输入数据手册标题' },
    image: { required: true, message: '请选择手册封面' },
    pdf: { required: true, message: '请选择PDF手册' },
    sort: { required: true, message: '请输入排序号' },
    status: { required: true, message: '请选择状态' }
})

defineExpose({ validate: validate(formRef), getForm: getForm(form), setForm: setForm(form) })
</script>
